<template>
  <el-header style="height:90px" id="header">
    <div class="header-left" @click="homeClick">
      <img src="@/assets/images/console/logo.png" alt="" style="width:134px;height:41px;" />
      <div class="left-cut"></div>
      <div class="left-text">
        开放平台
      </div>
    </div>
    <div class="header-right">
      <i class="el-icon-folder folder"></i>
      <div class="right-text folder-text">
        <router-link tag="a" to="/file">文档中心</router-link>
      </div>
      <div class="right-cut"></div>
      <div class="user right-text">
        <span v-show="company.has_auth == '0'">未认证</span>
        <span v-show="company.has_auth == '1'">待审核</span>
        <span v-show="company.has_auth == '2'">{{ company.name }}</span>
        <span v-show="company.has_auth == '3'">认证未通过</span>
      </div>
      <img v-show="company.has_auth == '2'" src="@/assets/images/console/renzheng.png" class="renzheng" alt="" />
      <el-dropdown>
        <div class="right-btn" v-show="company.has_auth !== '2'">
          注销
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="cancellation">注销登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-header>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'consoleHeader',
  methods: {
    homeClick() {
      this.$router.push('/home')
    },
    // 注销登录
    async cancellation() {
      const data = await this.http.get(`/web/login/sign-out?access_token=${this.loginList.token}`)
      console.log(data)
      this.$store.commit('removeCompanyList')
      this.$store.commit('removeloginList')
      this.$store.commit('loginShowNo')
      this.$router.push('/login')
    }
  },
  computed: {
    ...mapState({
      company: modules => modules.login.company,
      loginList: modules => modules.login.loginList
    })
  }
}
</script>
<style scoped lang="scss">
#header {
  padding: 0 50px;
  .header-left {
    display: flex;
    align-items: center;
    cursor: pointer;
    .left-cut {
      width: 2px;
      height: 34px;
      background: rgba(163, 163, 163, 1);
      border-radius: 1px;
      margin: 0 19px 0;
    }
    .left-text {
      width: 112px;
      font-size: 26px;
      color: rgba(255, 255, 255, 1);
      line-height: 39px;
      letter-spacing: 1px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    .right-text {
      width: auto;
      margin-right: 5px;
      font-size: 16px;
      color: rgba(255, 255, 255, 1);
      line-height: 24px;
      letter-spacing: 1px;
    }
    .right-cut {
      width: 2px;
      height: 27px;
      background: rgba(255, 255, 255, 0.5);
      margin: 0 18px 0;
    }
    .user {
      color: #fff;
    }
    .renzheng {
      width: 22px;
      height: 22px;
    }
    .right-btn {
      margin-left: 20px;
      width: 71px;
      height: 28px;
      text-align: center;
      background: rgba(35, 183, 105, 1);
      border-radius: 6px;
      font-size: 16px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 28px;
      letter-spacing: 1px;
      cursor: pointer;
    }
  }
}
</style>
